<template>
  <div>
    <my-form-drawer
      :title="`设置预设画面`"
      :width="370"
      :visible="visible"
      @ok="edit"
      @cancel="onClose"
    >
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="预设图片" prop="fileUrl">
          <a-upload
            name="file"
            list-type="picture-card"
            class="_uploader margin-t-10"
            action="/file/upload"
            :headers="headers"
            :show-upload-list="false"
            :before-upload="beforeUpload"
            @change="handleChange"
          >
            <img 
              width="320"
              height="180"
              v-if="form.fileUrl" 
              :src="form.fileUrl" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">
                上传图片
              </div>
            </div>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import MyFormDrawer from "@/components/drawer/MyFormDrawer";
import Cookie from "js-cookie";
import { set } from "@/services/device"
export default {
  name: "deviceSet",
  components: { MyFormDrawer },
  data() {
    return {
      form: {
        fileUrl: "",
        ids:[],
      },
      visible: false,
      rules: {
        fileUrl: [{ required: true, message: "请上传预设图片"}],
      },
      loading:false,
      headers: {
        Authorization: Cookie.get("Authorization")
      },
    };
  },
  computed: {},
  created() {
  },
  methods: {
    changeForm(state,selectedRowKeys) {
      this.visible = state;
      this.form.ids = selectedRowKeys;
    },
    initData() {
      this.form = {
        fileUrl: "",
        ids:[]
      };
    },
    onClose() {
      this.visible = false;
      this.$refs["form"].clearValidate();
      this.initData();
    },
    edit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        set(this.form).then(({data}) => {
          if(data.code == 0){
            this.$message.success('设置成功');
            this.onClose();
            this.$emit("getList");
          }
        })
      });
    },
    beforeUpload(file){
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("请上传图片格式的文件");
      }
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("请上传不大于3M的图片！");
      }
      return isJpgOrPng && isLt3M;
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.loading = true;
        return;
      }
      if (info.file.status === "done") {
        this.loading = false;
        this.form.fileUrl = info.file.response.data.url;
        return;
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ ._uploader > .ant-upload {
  width: 320px;
  height: 180px;
}
.ant-upload-select-picture-card i {
  font-size: 30px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
